<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>书籍页面</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
  <script src="js/common.js"></script>
  <link rel="stylesheet" href="css/nav-bottom.css">
    <link rel="stylesheet" href="css/word.css">
    <link rel="stylesheet" href="css/common.css">
</head>
<body>
<div id="info">
  <div class="book-name">{{ bookTitle }}</div>
  <ul class="top-select" id="top-select">
    <li id="undisposed-tab" class=" select">未处理{{ undisposed.length }}</li>
    <li id="execute-tab" >正在背{{ execute.length }}</li>
    <li id="familiar-tab" >已熟知{{ familiar.length }}</li>
  </ul>
  <div class="word-select" id="word-select">
    <div class="tab" id="undisposed" v-on:click="viewDetails($event)">
      <span class="iword" v-for="(txvalue,word,date) in undisposed">{{ word  }}</span>
    </div>
    <div class="tab" id="execute" style="display: none;" >
      <span class="iword" v-for="(txvalue,word,date) in execute">{{ word }}</span>
    </div>
    <div class="tab" id="familiar" style="display: none;">
      <span class="iword" v-for="(txvalue,word,date) in familiar">{{ word }}</span>
    </div>
  </div>
</div>

<div class="cover" id="cover" style="display:none"></div>
<div class="word-detail" id="word-detail" style="display:none">
  <div class="top">
    <span class="title">{{ title }}</span>
<!--    <span class="pronounce-britain">{{ pronounceBritain }}</span>-->
<!--    <span class="loudspeaker loudspeaker-britain"></span>-->
<!--    <span class="pronounce-america">{{pronounceAmerica}}</span>-->
<!--    <span class="loudspeaker loudspeaker-america"></span>-->
    <span class="close" id="close"></span>
  </div>
  <div class="content">
    <div class="explain">{{ explain }}</div>
    <div class="example-title">例句</div>
    <div class="example" v-for="exam in example ">{{ exam }}</div>
  </div>
  <div class="button">
    <span class="remove">移出词库</span>
    <span class="execute">未牢记</span>
    <span class="familiar">已掌握</span>
  </div>
</div>

<!-- 底部导航栏 -->
<div class="fill"></div>
<div class="nav-bottom">
  <div class="find" id="find"></div>
  <div class="bookshelf" id="bookshelf"></div>
  <div class="word" id="word"></div>
  <div class="my" id="my"></div>
</div>
<!-- 底部导航栏结束 -->
</body>
<script src="js/nav-bottom.js"></script>
<script src="js/word.js"></script>
</html>